<template>
  <div>
    <el-main>
      <el-select v-model="value" placeholder="行业筛选" @change="hanChange">
        <el-option v-for="item in cate" :key="item.id" :label="item.iname" :value="item.id">
        </el-option>
      </el-select>
      <div class="box">
        <div v-for="(item, index) in list" :key="index" class="box_item">
          <div style="position: relative;width:72%;padding-top:100%;">
            <img @click.stop="openUrls(item)" style="width:100%;height:100%;position: absolute;left: 0;top:0;"
              :src="item.thumb" alt="">
          </div>
          <!--   <a :href="item.url" target="_blank">
            <el-image style="width: 380px; height: 188px" :src="item.thumb" fit="cover">
          </el-image>
          </a> -->
          <p>{{ item.name }}</p>
          <a @click="openUrl(item)" style="color: #3377FF;"><i class="el-icon-download">下载</i></a>
        </div>
      </div>
    </el-main>
    <Service />
  </div>
</template>

<script>
import {
  IndustryCate,
  IndustryIndex,
  IndustryDownLoad
} from "@/api/admin"
import Service from "@/components/Service";

export default {
  components: {
    Service,
  },
  data() {
    return {
      value: '',
      list: [],
      cate: [],
      cate_id: null
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      try {
        this.cate = await IndustryCate();
        const res = await IndustryIndex({ cate_id: this.cate_id });
        this.list = res.list
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    hanChange(val) {
      this.cate_id = val
      this.getList()
    },
    async openUrls(item) {
      if (item.file) {
        // console.log(item.file)
        //判断item.file是否存在pdf
        if (item.file.indexOf('.pdf') > -1) {
          window.open(item.file)
        } else {
          const res = await IndustryDownLoad({
            id: item.id
          })
          const blob = new Blob([res.data]);
          const fileName = item.fname;
          const elink = document.createElement("a");
          elink.download = fileName;
          elink.style.display = "none";
          elink.href = URL.createObjectURL(blob);
          document.body.appendChild(elink);
          elink.click();
          URL.revokeObjectURL(elink.href); // 释放URL 对象
          document.body.removeChild(elink);
          
        }
      } else {
        const res = await IndustryDownLoad({
          id: item.id
        })
        const blob = new Blob([res.data]);
        const fileName = item.fname;
        const elink = document.createElement("a");
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink);
      }
    },
    async openUrl(item) {
      const res = await IndustryDownLoad({
        id: item.id
      })
      const blob = new Blob([res.data]);
      const fileName = item.fname;
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href); // 释放URL 对象
      document.body.removeChild(elink);
    }
  }
}
</script>

<style scoped lang="less">
.box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 20px auto;

  .box_item {
    width: 20%;
    cursor: pointer;
    margin: 0 0 30px 0;

    p {
      font-size: 18px;
      margin: 10px 0;
    }
  }
}
</style>
